<template>
  <div class="myDiv">

    <el-card>
      <!-- <div class="myDiv2">
        <div class="icon">
      <img src="@/assets/icon/1.jpg" class="image">
      <div class="descriptions">
        <p>招聘需求</p>
        <p>1</p>
      </div>
    </div>
    <div class="icon">
      <img src="@/assets/icon/1.jpg" class="image">
      <div class="descriptions">
        <p>招聘需求</p>
        <p>1</p>
      </div>
    </div>
    <div class="icon">
      <img src="@/assets/icon/1.jpg" class="image">
      <div class="descriptions">
        <p>招聘需求</p>
        <p>1</p>
      </div>
    </div>
    <div class="icon">
      <img src="@/assets/icon/1.jpg" class="image">
      <div class="descriptions">
        <p>招聘需求</p>
        <p>1</p>
      </div>
    </div>
    <div class="icon">
      <img src="@/assets/icon/1.jpg" class="image">
      <div class="descriptions">
        <p>招聘需求</p>
        <p>1</p>
      </div>
    </div>
      </div> -->
     
      <el-row :gutter="20">
        <el-col :span="6">
        <div style="display: flex;">
          <img src="@/assets/icon/1.jpg" class="image" style="width: 50px;height: 50px;border-radius: 50%;">
          <el-statistic title="员工总数">
            <template slot="formatter">
              {{ head.staffTotal }}
            </template>
          </el-statistic>
        </div>
      </el-col>
      <el-col :span="6">
        <div style="display: flex;">
          <img src="@/assets/icon/1.jpg" class="image" style="width: 50px;height: 50px;border-radius: 50%;">
          <el-statistic title="男女比">
            <template slot="formatter">
              {{ head.menNum }}/{{ head.womenNum  }}
            </template>
          </el-statistic>
        </div>
      </el-col>
      <el-col :span="6">
        <div style="display: flex;">
          <img src="@/assets/icon/1.jpg" class="image" style="width: 50px;height: 50px;border-radius: 50%;">
          <el-statistic title="需求人数">
            <template slot="formatter">
              {{ head.needsTotal}}
            </template>
          </el-statistic>
        </div>
      </el-col>
      <el-col :span="6">
        <div style="display: flex;">
          <img src="@/assets/icon/1.jpg" class="image" style="width: 50px;height: 50px;border-radius: 50%;">

          <el-statistic title="今日面试">
            <template slot="formatter">
              {{ head.reviewTotal}}
            </template>
          </el-statistic>
        </div>
      </el-col>
    </el-row>

     
    </el-card>
   
  </div>
</template>

<script>
import { getMenhuHead } from "@/api/hrmanagement/menhu";



export default {
  name: '',
  components:{
},
  props:{
},
  data(){
    return {
      head:{}, 
         
    }
  },
  watch:{
},
  computed:{
},
  methods:{
},
  created(){

      this.loading = true;
      getMenhuHead().then(response => {
        this.head = response.data;
     
      });



},
  mounted(){
}
}
</script>
<style lang="scss" scoped>
.myDiv2{
  display: flex;
 background-color: #fff;
 height: 100px;
padding-left: 20px;

  .icon{

    height: 100%;
    flex: 1;
  display: flex;
  color: #000;
  display: flex;
  align-content: center;
  align-items: center;
  border-radius: 5px;

  .image{
    width: 50px;
    height: 50px;
    border-radius: 50%;
  } 
  .descriptions{
    display: grid;
  align-items: center; /* 垂直居中 */
  width: 100%;
    
    margin-left: 10px;

    p:nth-of-type(1) {
      margin: 5px;
      line-height: 18px;
      font-size: 18px;
    }
    p:nth-of-type(2) {
      margin: 5px;
      line-height: 20px;
      font-size: 20px;
      font-weight: bold;
    }
   
  }

}
}
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        
 

</style>